import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true, color: '#235fa7', shadowColor: '#235fa7' })
  const w = board.width
  const h = board.height
  const paths = [
    `M 5 20 L 5 10 L 12 3  L 60 3 L 68 10 L ${w - 20} 10 L ${w - 5} 25 L ${w - 5} ${h - 5} L 20 ${h - 5} L 5 ${
      h - 20
    } L 5 20`,
    `M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`,
    `M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${w - 30} ${h - 5}`
  ]
  for (let i = 0; i < paths.length; i++) {
    const path = new GraphBack.Path({ path: paths[i], fill: false })
    if (i > 0) path.option.color = '#51d6a9'
    board.add(path)
  }
  const transform = new GraphBack.Transform(new GraphBack.Path({ path: `M 16 9 L 28 9`, fill: false })).array(3, 15)
  board.add(transform)
  board.render()
}
